<template>
  <div>
    <h2>{{ homeCounter }}</h2>
    <h2>{{ doubleHomeCounter }}</h2>
    <button @click="increment">home+1</button>
    <button @click="incrementAction">home+1</button>
    <hr />
  </div>
</template>

<script>
import {
  // mapState,
  // mapGetters,
  // mapMutations,
  // mapActions,
  createNamespacedHelpers,
} from "vuex";
import useState from "../hooks/useState";
import useGetters from "../hooks/useGetters";

const {
  mapState,
  mapGetters,
  mapMutations,
  mapActions,
} = createNamespacedHelpers("home");

export default {
  computed: {
    // 写法1
    // ...mapState({
    //   homeCounter: (state) => state.home.homeCounter,
    // }),
    // ...mapGetters({
    //   doubleHomeCounter: "/home/doubleHomeCounter",
    // }),
    // 写法2
    // ...mapState("home", ["homeCounter"]),
    // ...mapGetters("home", ["doubleHomeCounter"]),
    // 写法3
    // ...mapState(["homeCounter"]),
    // ...mapGetters(["doubleHomeCounter"]),
  },
  methods: {
    // 写法1
    // ...mapMutations({
    //   increment: "/home/increment",
    // }),
    // ...mapActions({
    //   incrementAction: "/home/incrementAction",
    // }),
    // 写法2
    // ...mapMutations("home", ["increment"]),
    // ...mapActions("home", ["incrementAction"]),
    // 写法3
    // ...mapMutations(["increment"]),
    // ...mapActions(["incrementAction"]),
  },
  setup() {
    const state = useState("home", ["homeCounter"]);
    const getters = useGetters("home", ["doubleHomeCounter"]);

    const mutations = mapMutations(["increment"]);
    const actions = mapActions(["incrementAction"]);

    return { ...state, ...getters, ...actions, ...mutations };
  },
};
</script>

<style scoped></style>
